<template>
  <div class="channelsManagement">
    <h3>渠道管理</h3>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData">添加</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
      >
        <el-table-column
          header-align="center"
          align="center"
          prop="num"
          label="序号"
          sortable
          width="90"
        ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="domain" width="200"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="channel" width="200"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="from" width="150"></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="url" ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="备注" ></el-table-column>
        <el-table-column header-align="center" align="center" prop="num" label="状态" width="90"></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="success" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
        <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="100"
        layout="total, prev, pager, next, jumper"
        :total="1000"
      ></el-pagination>
    </div>
    <!-- //新增修改弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="modifyEditorDialogVisible" width="40%" center>
     <div class="row">
        <span>domain：</span>
        <el-input placeholder="请输入domain" v-model="inputDomain" clearable></el-input>
      </div>
      <div class="row">
        <span>channel：</span>
        <el-input placeholder="请输入channel" v-model="inputChannel" clearable ></el-input>
      </div>
      <div class="row">
        <span>from：</span>
        <el-input placeholder="请输入排序" v-model="inputFrom" clearable></el-input>
      </div>
      <div class="row">
        <span>状态：</span>
         <el-select v-model="inputStatus" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="row">
        <span>备注信息：</span>
        <el-input placeholder="请输入备注信息" v-model="inputNote" clearable type="textarea" :rows="3"></el-input>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "channelsManagement",
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          num: 1,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          num: 2,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
          num: 3,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          num: 4,
          userName: "aaa",
          group: "客服人员",
          type: "普通管理员",
          note: "大师傅艰苦是否就是",
          state: "正常"
        }
      ],
       options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      currentPage1:1,
      dialogTitle:"修改渠道",
      modifyEditorDialogVisible:false,
      //弹窗
      inputDomain:"",
      //弹窗
      inputChannel:"",
      //弹窗
      inputFrom:"",
      //弹窗状态
      inputStatus:"",
      //弹窗备注信息
      inputNote:"",
    };
  },
  mounted() {},
  methods: {
      // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
    },
    //新增
    addData(){
        this.modifyEditorDialogVisible=true;
        this.dialogTitle="新建渠道";
    },
    //编辑
    handleEdit(index,row){
        this.modifyEditorDialogVisible=true;
         this.dialogTitle="修改渠道";
    },
    //删除
    handleDelete(index,row){},
    //提交修改或者新增
    submitModifyEditor(){},
    //取消提交
    cancelModifyEditor(){
        this.modifyEditorDialogVisible=false;
    },
  }
};
</script>
<style scoped>
h3{
    padding:.2rem;
    color:#3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
</style>